<template>
    <div class="content">
        <el-menu :default-active="safeType" @select="changeSafeType" mode="horizontal" class="orderType">
            <el-menu-item index="editPassowrd">修改登录密码</el-menu-item>
            <el-menu-item index="editPhone">修改绑定手机</el-menu-item>
        </el-menu>
        <el-form :model="form" ref="form" :rules="rules" label-width="130px" class="safe-form-box edit-form-box">
            <el-row class="form-conent-box" v-if="this.safeType == 'editPassowrd'">
                <el-col :span="24">
                    <div class="approve-int-box">
                        <el-form-item label="旧密码：" prop="password">
                            <el-input class="approve-int" type="password" v-model="form.password" placeholder="请输入旧密码"></el-input>
                        </el-form-item>
                        <el-form-item label="设置新密码：" prop="new_password">
                            <el-input class="approve-int" type="password" v-model="form.new_password" placeholder="请输入6-12位新密码，建议包含数字和字母"></el-input>
                        </el-form-item>
                        <el-form-item label="确认密码：" prop="re_new_password">
                            <el-input class="approve-int" type="password" v-model="form.re_new_password" placeholder="请再次输入新密码"></el-input>
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="24">
                    <div class="submit-btn safe-submit-btn">
                        <el-button type="info" size="small" @click="close()">取消</el-button>
                        <el-button type="primary" size="small" @click="editPassword()">提交</el-button>
                    </div>
                </el-col>
            </el-row>
            <el-row class="form-conent-box" v-if="this.safeType == 'editPhone'">
                <el-col :span="24">
                    <div class="approve-int-box">
                        <el-form-item label="原手机号：">
                            <span>{{customerInfo.phone_number}}</span>
                        </el-form-item>
                        <el-form-item label="原手机验证码：" class="phone-code-form" prop="phone_verify_code">
                            <el-input class="register-int" maxlength="6" v-model="form.phone_verify_code" placeholder="请输入短信验证码"></el-input><MessageCode @click.native="getLodMessageCode" ref="oldmessageCode" :phoneNumber="this.customerInfo.phone_number"></MessageCode>
                        </el-form-item>
                        <el-form-item label="新手机号码：" prop="new_phone_number">
                            <el-input class="approve-int" v-model="form.new_phone_number" placeholder="请输入新手机号码"></el-input>
                        </el-form-item>
                        <el-form-item label="新手机验证码：" class="phone-code-form" prop="new_phone_verify_code">
                            <el-input class="register-int" maxlength="6" v-model="form.new_phone_verify_code" placeholder="请输入短信验证码"></el-input><MessageCode @click.native="getMessageCode" ref="messageCode" :phoneNumber="this.form.new_phone_number"></MessageCode>
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="24">
                    <div class="submit-btn safe-submit-btn">
                        <el-button type="info" size="small" @click="close()">取消</el-button>
                        <el-button type="primary" size="small" @click="editPhone()">提交</el-button>
                    </div>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>

<script lang="ts">
    import {Vue, Component} from 'vue-property-decorator';
    import MessageCode from '@component/common/MessageCode.vue';
    import { mapGetters, mapState } from 'vuex';
    @Component({
        components: {
            MessageCode
        },
        computed: {
            ...mapState([
                'userInfo'
            ])
        }
    })
    export default class Safe extends Vue {
        safeType:string = 'editPassowrd';
        customerInfo:any = {};
        //最新订单/历史订单切换
        changeSafeType (tab) {
            this.safeType = tab;
            if(tab == 'editPhone'){
                this.getCustomer();
            }
        }
        // 获取联系人信息
        async getCustomer () {
            this.$http.get(`customers/customer/${this.userInfo.customer_id}`)
                .then((response) => {
                    this.customerInfo = response.data;
                })
        }
        form = {
            password: '',
            new_password: '',
            re_new_password: '',
            phone_verify_code: '',
            new_phone_number: '',
            new_phone_verify_code: ''
        }
        rules = {
            password: [
                {required: true, message: '请输入您的旧密码', trigger: 'blur'}
            ],
            new_password: [
                {required: true, message: '请输入您的新密码', trigger: 'blur'}
            ],
            re_new_password: [
                {required: true, message: '请再次输入密码', trigger: 'blur'},
                {validator: this.testConfirmPassword, trigger: 'blur'}
            ],
            phone_verify_code: [
                {required: true, message: '请输入短信验证码', trigger: 'blur'}
            ],
            new_phone_number: [
                {required: true, message: '请输入手机号', trigger: 'blur'},
                {
                    pattern: /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/,
                    message: '手机号码错误',
                    trigger: 'blur'
                }
            ],
            new_phone_verify_code: [
                {required: true, message: '请输入短信验证码', trigger: 'blur'}
            ]
        }
        testConfirmPassword (rule, value, cb) {
            if (this.form.new_password === '') {
                cb(new Error('请先输入密码'))
            } else {
                if (value === this.form.new_password) {
                    cb()
                } else {
                    cb(new Error('您两次输入的密码不一致,请重新输入'))
                }
            }
        }
        // 修改密码
        editPassword () {
            if(!this.form.password){
                this.$alert('请先输入密码','提示',{
                    confirmButtonText: '确定',
                    customClass: 'custom-message-box',
                    center: true,
                    callback: action => {

                    }
                })
                return;
            }
            if(!this.form.new_password){
                this.$alert('请先输入新密码','提示',{
                    confirmButtonText: '确定',
                    customClass: 'custom-message-box',
                    center: true,
                    callback: action => {

                    }
                })
                return;
            }
            if(!this.form.re_new_password){
                this.$alert('请确认新密码','提示',{
                    confirmButtonText: '确定',
                    customClass: 'custom-message-box',
                    center: true,
                    callback: action => {

                    }
                })
                return;
            }
            //  发送请求
            let passwordForm = {
                password: this.form.password,
                new_password: this.form.new_password,
                re_new_password: this.form.re_new_password
            }
            this.$http.put('customers/customerPassword',passwordForm)
                .then((response) => {
                    if(response.status == 200){
                        this.$alert('密码修改成功，请退出重新登录。','提示',{
                            confirmButtonText: '确定',
                            customClass: 'custom-message-box',
                            center: true,
                            callback: action => {
                            //    退出登录
                            this.$http.post('customers/customerLogout')
                                .then((response) => {
                                    localStorage.removeItem('userInfo');
                                    location.href = "user.html";
                                })
                            }
                        })
                    }
                })
        }
        // 修改手机号
        editPhone () {
            let phoneForm = {
                phone_verify_code: this.form.phone_verify_code,
                new_phone_number: this.form.new_phone_number,
                new_phone_verify_code: this.form.new_phone_verify_code
            }
            this.$http.put('customers/customerPhone',phoneForm)
                .then((response) => {
                    console.log(response)
                    if(response.status < 204){
                        this.$alert('手机号修改成功，请退出重新登录。','提示',{
                            confirmButtonText: '确定',
                            customClass: 'custom-message-box',
                            center: true,
                            callback: action => {
                                //    退出登录
                                this.$http.post('customers/customerLogout')
                                    .then((response) => {
                                        localStorage.removeItem('userInfo');
                                        location.href = "user.html";
                                    })
                            }
                        })
                    }
                })
        }
        // 获取原手机验证码
        getLodMessageCode () {
            this.$refs.oldmessageCode.start();
        }
        // 获取新手机验证码
        getMessageCode () {
            this.$refs.messageCode.start();
        }
        close () {
            location.href = '/trade.html';
        }
    }
</script>

<style lang="scss" scoped>
    .safe-form-box {
        width: 450px;
        margin: 40px auto;
    }
    .safe-submit-btn {
        margin-left: 130px;
        .el-button{
            font-size: 14px;
        }
        .el-button:nth-child(2){
            float: right;
        }
    }
    .phone-code-form {
        .el-input {
            width: 214px;
            margin-right: 4px;
        }
        .register-int .el-input__inner {
            width: 214px;
        }
    }
</style>
<style lang="scss">
    .register-int .el-input__inner {
        height: $height-int-register;
        line-height: $height-int-register;
    }
</style>